<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:replace="base::head(~{})"></head>
<body>
<div class="x-body layui-anim layui-anim-up">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>新增</legend>
    </fieldset>
    <form id="form" class="layui-form layui-form-pane" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input type="text" name="name" lay-verify="required|name" autocomplete="off" value="a123455655"
                       placeholder="请输入用户名" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline">
                <input type="text" name="fullName" lay-verify="required" autocomplete="off" value="werwerwer"
                       placeholder="请输入姓名" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <input type="text" name="password" lay-verify="password" autocomplete="off" placeholder="请输入初始密码"
                       value="a123456" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">组织机构</label>
            <div class="layui-input-inline">
                <input type="hidden" id="groupId" name="groupId">
                <input type="text" id="groupName" name="groupName" lay-verify="required" autocomplete="off" value=""
                       placeholder="请选择组织机构" class="layui-input" readonly="readonly">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-inline">
                <input type="text" name="phone" lay-verify="phone" autocomplete="off" value="18918918877"
                       placeholder="请输入手机号" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-inline">
                <input type="text" name="email" lay-verify="email" autocomplete="off" value="abc@qq.com"
                       style="width: 400px;" placeholder="请输入邮箱" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" pane="" style="width: 297px;">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="radio" name="status" value="0" title="启用" checked="">
                <input type="radio" name="status" value="1" title="禁用">
            </div>
        </div>
        <div class="layui-form-item">
            <button class="layui-btn" lay-submit="" lay-filter="submit">保存</button>
            <a href="javascript:;" id="close" class="layui-btn">关闭</a>
        </div>
    </form>
</div>
</body>
<script>
    layui.use(['form'], function () {
        var form = layui.form;
        form.verify({
            name: function (value, item) { //value：表单的值、item：表单的DOM对象
                if (!new RegExp('^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$').test(value)) {
                    return '用户名不能有特殊字符';
                }
                if (/(^\_)|(\__)|(\_+$)/.test(value)) {
                    return '用户名首尾不能出现下划线\'_\'';
                }
                if (/^\d+\d+\d$/.test(value)) {
                    return '用户名不能全为数字';
                }
            },
            password: [/^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格']
        });
        //监听提交
        form.on('submit(submit)', function (data) {
            $.ajax({
                //几个参数需要注意一下
                type: 'post',//方法类型
                dataType: 'json',//预期服务器返回的数据类型
                url: ctxPath + '/system/user/add',//url
                data: $('#form').serialize(),
                success: function (result) {
                    if (result.code == 0) {
                        admin_close_success_msg('保存成功');
                        return;
                    } else {
                        layer.msg('保存失败。错误信息：' + result.msg, {
                            icon: 2
                        });
                        return;
                    }
                },
                error: function () {
                    layer.msg('保存失败', {
                        icon: 2
                    });
                }
            });
            return false;
        });

        $('#close').on('click', function () {
            admin_close_iframe_window();
        });
        $('#groupName').on('click', function () {
            layer.open({
                type: 2,
                area: ['600px', '600px'],
                fix: false, // 不固定
                maxmin: true,
                shadeClose: true,
                shade: 0.5,
                resize: true,
                title: '选择',
                content: ctxPath + '/systemGroup/toChoice',
                success: function (layero, index) {
                    var iframe = window['layui-layer-iframe' + index];
                },
            });
        });
    });
    function loadGroupInfo(groupId, groupName) {
        $('#groupId').val(groupId);
        $('#groupName').val(groupName);
    }
</script>
</html>